<template>
  <div class="left-chart-1">
    <template v-if="option.xAxis.data.length">
      <CustomChart class="lc2-chart" :option="option" />
    </template>
    <div v-else class="no-data">暂无数据</div>
  </div>
</template>

<script>
import CustomChart from "../../components/CustomChart";
import { queryPowerConsumption } from "@/api/dashboard/injectionWorkshop";
const lineLabelColor = "#ffffffeb";
export default {
  name: "LeftChart3",
  components: { CustomChart },
  props: {
    refreshKey: {
      type: Number,
      default: 0,
    },
    workshopItem: {
      type: Object,
      default: null,
    },
    groupItem: {
      type: Object,
      default: null,
    },
    produceDate: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      option: {
        color: ["#5470c6", "#91cc75", "#fac858", "#006efd"],
        grid: {
          top: 30,
          bottom: 20,
          right: 28,
        },
        tooltip: {
          trigger: "axis",
          padding: [5, 10],
        },
        legend: {
          show: false,
          data: [
            {
              name: "电耗",
              icon: "path://M10 0 H 90 C 100 10, 100 0, 100 100 V 90 C 90 100, 100 100, 0 100 H 10 C 0 90, 0 100, 0 0 V 10 C 10 0, 0 0, 100 0",
              // icon: "path://M8,4 h24 q4,0 4,4 v24 q0,4 -4,4 h-24 q-4,0 -4,-4 v-24 q0,-4 4,-4",
              textStyle: {
                padding: [0, -6],
              },
            },
          ],
          textStyle: {
            color: lineLabelColor,
          },
          // itemWidth: 15,
          itemHeight: 13,
        },
        xAxis: {
          data: [],
          axisLine: {
            lineStyle: {
              color: lineLabelColor,
            },
          },
          axisLabel: {
            color: lineLabelColor,
            interval: 0,
          },
          axisTick: {
            show: false,
          },
        },
        yAxis: {
          name: "度/kg",
          nameTextStyle: {
            color: lineLabelColor,
          },
          position: "left",
          splitLine: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              color: lineLabelColor,
            },
          },
          axisLabel: {
            color: lineLabelColor,
            hideOverlap: true,
          },
          axisTick: {
            show: false,
          },
          max: null,
        },
        series: [
          {
            name: "电耗",
            data: [],
            type: "bar",
            markLine: {
              symbol: [],
              lineStyle: {
                type: "solid",
                width: 1,
                // color: "#fac858"
              },
              data: [
                {
                  name: "警戒线",
                  yAxis: 0,
                },
              ],
            },
            label: {
              show: true,
              fontSize: 11,
              position: "top",
              color: lineLabelColor,
            },
            barGap: 0,
            barWidth: "30%",
          },
        ],
      },
    };
  },
  created() {
    this.getData();
  },
  methods: {
    async getData() {
      if (!this.workshopItem?.value || !this.groupItem) {
        return;
      }
      let tableData = {};
      try {
        const res = await queryPowerConsumption({
          workshopId: this.workshopItem.value,
          produceDate: this.produceDate,
          groupId: this.groupItem.groupId,
        });

        tableData = res.data || {};
      } catch (error) {
        tableData = {};
      }
      if (tableData?.consumptionInfoList) {
        this.formatter(tableData.consumptionInfoList, tableData.goal);
      }
    },
    formatter(tableData, goal) {
      let xAxisData = [];
      let seriesData = [];
      tableData.forEach((ele) => {
        xAxisData.push(ele.lineName);
        seriesData.push({
          value: ele.consumption,
          itemStyle: {
            color: Number(ele.consumption) > Number(goal) ? "#ed5151" : null,
          },
        });
      });
      this.option.xAxis.data = xAxisData;
      this.option.series[0].data = seriesData;

      this.option.series[0].markLine.data[0].yAxis = goal;

      this.option.yAxis.max = Math.max(
        ...seriesData.map((ele) => ele.value),
        goal
      );
    },
  },
  watch: {
    refreshKey: {
      handler() {
        this.getData();
      },
    },
  },
};
</script>

<style lang="less" scoped>
.left-chart-1 {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding-top: 42px;

  .lc2-chart {
    flex: 1;
  }
}
.no-data {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  opacity: 0.6;
}
</style>
